<template>
	<tm-fullView>
		<tm-menubars title="拖放排序" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="shadow-24 ma-32 round-4 overflow">
			<tm-dragList  @change="listChange" :list="list"></tm-dragList>
		</view>
		<view class="ma-32">
			<tm-button block @click="changeListData">动态修改数据</tm-button>
		</view>
	</tm-fullView>
</template>

<script>
	import tmDragList from '@/tm-vuetify/components/tm-dragList/tm-dragList.vue';
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	export default {
		components: {
			tmDragList,
			tmMenubars,
			tmFullView,
			tmButton,
		},
		data() {
			return {
			
				list: [{
						text: "菜单选项",
						icon: 'icon-menu',
						color:'red'
					},
					{
						text: "微信",
						icon: 'icon-weixin',
						color:'green',
						
					},
					{
						text: "微信朋友圈",
						icon: 'icon-pengyouquan',
						color:'red'
					},
					{
						text: "标题444",
						
					},
					{
						text: "标题555",
						icon: 'icon-QQ',
						color:'blue'
					},
				]
			};
		},
		methods: {
			changeListData() {
				this.list.push({
					text: "标题"+Math.floor(Math.random()*100),
					color: 'white'
				})
			},
			listChange(list){
				
				// this.list = [...list];
			}
		},
	};
</script>

<style lang="scss">

</style>
